<template>
  <div>
    <t-navbar title="Mindfulness" :fixed="false" />

    <div class="demo-tab-bar">
      <t-tabs default-value="1" theme="tag">
        <t-tab-panel v-for="(item, index) in tabPanels" :key="index" :value="item.value" :label="item.label" @click="change" />
      </t-tabs>
    </div>

    <div class="zn" style="padding: 0 16px">
      <t-swiper
          direction="vertical"
          :height="1000"
          :autoplay="true"
          :navigation="{ type: 'dots-bar', paginationPosition: 'right' }"
          @change="handleChange"
      >
        <t-swiper-item v-for="(item, index) in swiperList" :key="index">
          <img :src="item" class="img" />

        </t-swiper-item>
      </t-swiper>
    </div>
  </div>

</template>

<script setup>
import {ref,onMounted,h} from 'vue'

const tabPanels = [
  {
    value: '1',
    label: '正念',
  },
  {
    value: '2',
    label: '冥想',
  },
  {
    value: '3',
    label: '入睡',
  },
  {
    value: '4',
    label: '呼吸',
  },
];

const imageCdn = 'https://tdesign.gtimg.com/mobile/demos';
const swiperList = [
  `${imageCdn}/swiper1.png`,
  `${imageCdn}/swiper2.png`,
  `${imageCdn}/swiper1.png`,
  `${imageCdn}/swiper2.png`,
  `${imageCdn}/swiper1.png`,
];
const handleChange = (index, context) => {
  console.log('基础示例,页数变化到》》》', index, context);
};

</script>

<style scoped>

</style>